<template>
  <el-dialog
    class="modify-class"
    width="96%"
    visible
    append-to-body
    :title="title"
    :close-on-click-modal="true"
    :before-close="beforeClose"
  >
    <div style="margin:20px 0;">
      <component :is="billType.componentId" v-bind="billType.props" :list="tableData" @refresh="refresh"/>
    </div>
  </el-dialog>
</template>

<script>
import DeviceTable from '../progress/table/DeviceTable'
import ExperimenTable from '../progress/table/ExperimentTable'
import SystemTable from '../progress/table/SystemTable'
import QualityTable from '../quality/QualityTable'
import TechnologyTable from '../technology/TechnologyTable'

import progressApi from "@/apis/overview/progress.js";
import { overviewApis } from "@/apis";
import qualityApi from '@/apis/overview/quality'
import technologyApi from '@/apis/overview/technology.js'


// 办理详情弹窗
export default {
  components: {
    DeviceTable,
    SystemTable,
    ExperimenTable,
    QualityTable,
    TechnologyTable,
  },
  props: {
    detailData: {
      type: Object,
      default() {
        return {
          billType: {
            code: 'PRO_DEVICE'
          }
        }
      },
    },
  },
  data() {
    return {
      loading: false,
      tableData: [],
      // 业务类型
      billTypeMap: {
        PRO_DEVICE: {
          componentId: DeviceTable,
          props: {
            height: '300px'
          },
          promiseApi: progressApi.progressDeviceFindPageInfo,
          desc: '进度管理-单机进度详情',
        },
        PRO_EXP: {
          componentId: ExperimenTable,
          props: {
            height: '300px'
          },
          promiseApi: overviewApis.progressExperimentFindPageList,
          desc: '进度管理-综合实验进度',
        },
        PRO_READY: {
          componentId: SystemTable,
          props: {
            height: '300px'
          },
          promiseApi: overviewApis.progressReadyFindPageList,
          desc: '进度管理-系统交付进度',
        },
        QUALITY: {
          componentId: QualityTable,
          props: {
            isDelete: false,
            height: '300px'
          },
          promiseApi: qualityApi.findPageList,
          desc: '质量问题',
        },
        TECH_TMP_SYS: {
          componentId: TechnologyTable,
          props: {
            deviceOrSystem: 'SYSTEM',
            billType: 'TEMP',
            isDelete: false,
            height: '300px'
          },
          promiseApi: technologyApi.technologyList,
          desc: '技术状态临时系统',
        },
        TECH_TMP_DEV: {
          componentId: TechnologyTable,
          props: {
            deviceOrSystem: 'DEVICE',
            billType: 'TEMP',
            isDelete: false,
            height: '300px'
          },
          promiseApi: technologyApi.technologyList,
          desc: '技术状态临时单机',
        },
        TECH_NOR_SYS: {
          componentId: TechnologyTable,
          props: {
            deviceOrSystem: 'SYSTEM',
            billType: 'NORMAL',
            isDelete: false,
            height: '300px'
          },
          promiseApi: technologyApi.technologyList,
          desc: '技术状态变更系统',
        },
        TECH_NOR_DEV: {
          componentId: TechnologyTable,
          props: {
            deviceOrSystem: 'DEVICE',
            billType: 'NORMAL',
            isDelete: false,
            height: '300px'
          },
          promiseApi: technologyApi.technologyList,
          desc: '技术状态变更单机',
        },
      },
    }
  },
  computed: {
    title() {
      return this.detailData.pendingModel
    },
    billType() {
      return this.billTypeMap[this.detailData.billType.code]
    }
  },
  watch: {
    detailData() {
      this.requestData()
    }
  },
  methods: {
    close(refresh) {
      this.$emit('close', refresh)
    },
    beforeClose() {
      this.close()
    },
    refresh() {
      this.requestData()
      this.$emit('refresh-sub')
    },
    requestData() {
      this.loading = true
      this.billType.promiseApi({
        id: this.detailData.id
      }).then(res => {
        const {list} = res.data
        this.tableData = list.map((item) => {
          return {
            ...item,
            edit: false,
          };
        });
        
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  },
  mounted() {
    if (this.detailData && this.detailData.id) {
      this.requestData()
    }
  }
}
</script>

<style></style>
